<template>
  <Layout>
    <!-- Page Header -->
    <header class="masthead" style="background-image: url('/img/home-bg.jpg')">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="site-heading">
              <h1>Clean Blog</h1>
              <span class="subheading">A Blog Theme by Start Bootstrap</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <section class="main-content">
            <el-row>
                <el-col :span="6" style="padding-right:10px">
                  <el-card shadow="never">
                    <el-menu>
                        <el-menu-item :class="{'is-active':(index===selected)}" @click="select(index)" v-for="(item, index) in constantRouterMap" 
                            :key="item.path" :index="item.path">
                            <i :class="item.meta.icon"></i>
                            <span slot="title">{{item.meta.title}}</span>
                        </el-menu-item>
                    </el-menu>
                  </el-card>
                </el-col>
                <el-col :span="18" style="padding-left:10px">
                  <div style="min-height: 600px" v-show="selected===0">
                    <el-card shadow="never" style="min-height: 400px"  v-if="blog.id">
                        <div slot="header">
                            <span>{{blog.title}}</span>
                        </div>
                        <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
                            发布 {{blog.created_at}}
                            <br> 更新 {{blog.updated_at}}
                        </div>
                        <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;border-bottom: 1px solid #E4E7ED;padding: 5px 0px 5px 0px">
                            <pre style="font-family: '微软雅黑'">{{blog.description}}</pre>
                        </div>
                        <div v-html="blog.content" class="markdown-body" style="padding-top: 20px"></div>
                    </el-card>
                    <el-card shadow="never" style="margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center" v-if="!blog.id">
                      <font style="font-size: 30px;color:#dddddd ">
                          <b>没有更新 ╮(๑•́ ₃•̀๑)╭</b>
                      </font>
                  </el-card>
                  </div>
                  <!-- 社交 -->
                  <div v-show="selected===1">
                    <el-card shadow="never" style="min-height: 400px;margin-bottom: 20px;padding: 0px 0px 20px 0px">
                        <el-tabs v-model="activeTab" type="card">
                            <el-tab-pane class="is-active" :label="'粉丝 '" name="followers" style="padding: 5px">
                                <div>
                                    <div>
                                        <el-row style="min-height: 200px; ">
                                            <el-col :span="8" v-for="(item,index) in $page.allFan.edges" :key="'followers'+index" style="padding: 10px">
                                                <el-card shadow="hover" style="font-size: 13px;color: #606266;line-height: 20px">
                                                    <i class="el-icon-star-off"></i>&emsp;
                                                    <!-- <a @click="$router.push(`/details/${item.node.name}`)" style=" text-decoration:none;cursor:pointer">{{item.node.name}}</a> -->
                                                    <g-link style=" text-decoration:none;cursor:pointer">{{item.node.name}}</g-link>
                                                    <br>
                                                    <i class="el-icon-message"></i>&emsp;
                                                    <a :href="item.node.htmlUrl" target="_blank" style=" text-decoration:none;cursor:pointer">TA的主页</a>
                                                    <br>
                                                    <img :src="item.node.avatarUrl" style="width: 100%;border-radius:5px;margin-top: 5px">
                                                </el-card>
                                            </el-col>
                                        </el-row>
                                        <div style="text-align: center;margin-top: 10px">
                                            <!-- <el-pagination @current-change="onSelect" background layout="prev, pager, next" :current-page.sync="followers.query.page"
                                                :page-size="followers.query.pageSize" :total="followers.query.pageNumber*followers.query.pageSize">
                                            </el-pagination> -->
                                            <pager :info="$page.allFan.pageInfo"></pager>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane :label="'关注 '" name="following" style="padding: 5px">
                                <div>
                                    <div v-if="true">
                                        <el-row style="min-height: 200px; ">
                                            <el-col :span="8" v-for="(item,index) in $page.allFoll.edges" :key="'following'+index" style="padding: 10px">
                                                <el-card shadow="hover" style="font-size: 13px;color: #606266;line-height: 20px">
                                                    <i class="el-icon-star-off"></i>&emsp;
                                                    <!-- <a @click="$router.push(`/user/social/details/${item.node.name}`)" style=" text-decoration:none;cursor:pointer">{{item.node.name}}</a> -->
                                                    <g-link :to="`/details/${item.node.name}`" style=" text-decoration:none;cursor:pointer">{{item.node.name}}</g-link>
                                                    <br>
                                                    <i class="el-icon-message"></i>&emsp;
                                                    <a :href="item.node.htmlUrl" target="_blank" style=" text-decoration:none;cursor:pointer">TA的主页</a>
                                                    <br>
                                                    <img :src="item.node.avatarUrl" style="width: 100%;border-radius:5px;margin-top: 5px">
                                                </el-card>
                                            </el-col>
                                        </el-row>
                                        <div style="text-align: center;margin-top: 10px">
                                            <!-- <el-pagination @current-change="onSelect" background layout="prev, pager, next" :current-page.sync="following.query.page"
                                                :page-size="following.query.pageSize" :total="following.query.pageNumber*following.query.pageSize">
                                            </el-pagination> -->
                                            <pager :info="$page.allFoll.pageInfo"></pager>
                                        </div>
                                    </div>
                                    <div style="min-height: 300px;margin-bottom: 20px;padding: 20px 0px 20px 0px;text-align: center" v-else>
                                        <font style="font-size: 30px;color:#dddddd ">
                                            <b>(￢_￢) 还没有关注一个人</b>
                                        </font>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                  </div>
                <!-- 博客列表 -->
                <div style="min-height: 600px" v-show="selected===2">
                      <el-card shadow="never" style="margin-bottom: 20px">
                          <el-input placeholder="请输入关键字" clearable style="width: 300px"></el-input>
                          <el-button icon="el-icon-search" style="margin-left: 10px" circle plain></el-button>
                          <el-button style="margin-left: 10px" icon="el-icon-share" type="warning" plain circle></el-button>
                          <el-button type="primary" icon="el-icon-edit" round plain style="float: right;">写博文</el-button>
                      </el-card>
                      <div>
                          <el-card shadow="hover" v-for="(item,index) in $page.allBlogs.edges" :key="'p'+index" style="margin-bottom: 20px">
                              <div slot="header">
                                  <el-row>
                                      <el-col :span="16">
                                          <span>
                                              <a style="text-decoration:none;cursor:pointer">
                                                  <i class="el-icon-edit-outline"></i>&nbsp;&nbsp; {{item.node.title}}
                                              </a>
                                          </span>
                                      </el-col>
                                      <el-col :span="8">
                                          <div style="text-align: right;">
                                              <el-button style="padding: 3px 0" type="text" icon="el-icon-share"></el-button>
                                              <el-button style="padding: 3px 0" type="text" icon="el-icon-edit"></el-button>
                                              <el-button style="padding: 3px 0" type="text" icon="el-icon-delete"></el-button>
                                          </div>
                                      </el-col>
                                  </el-row>
                              </div>
                              <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
                                  最近更新 {{item.node.updateTime}}
                              </div>
                              <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">
                                  {{item.node.description}}
                              </div>
                          </el-card>
                          <div style="text-align: center">
                              <!-- <el-pagination @current-change="list" background layout="prev, pager, next" :current-page.sync="query.page" :page-size="query.pageSize"
                                  :total="query.pageNumber*query.pageSize">
                              </el-pagination> -->
                              <pager :info="$page.allBlogs.pageInfo"></pager>
                          </div>
                      </div>
                </div>
                <!-- project -->
                <div style="min-height: 600px" v-show="selected===3">
                      <el-card shadow="never" style="margin-bottom: 20px">
                          <el-input placeholder="请输入关键字" clearable style="width: 300px"></el-input>
                          <el-button icon="el-icon-search" style="margin-left: 10px" circle plain></el-button>
                          <el-button icon="el-icon-share" type="warning" style="margin-left: 10px" plain circle></el-button>
                      </el-card>

                      <div>
                          <el-card shadow="hover" v-for="(item,index) in $page.allPro.edges" :key="'pro'+index" style="margin-bottom: 20px">
                              <div slot="header">
                                  <el-row>
                                      <el-col :span="16">
                                          <span>
                                              <a style="text-decoration:none;cursor:pointer">
                                                  <i class="el-icon-service"></i>&nbsp;&nbsp; {{item.node.name}}
                                              </a>
                                          </span>
                                      </el-col>
                                      <el-col :span="8">
                                          <div style="text-align: right;">
                                              <el-button style="padding: 3px 0" type="text" icon="el-icon-back">前往GitHub</el-button>
                                              <el-button style="padding: 3px 0" type="text" icon="el-icon-share"></el-button>
                                          </div>
                                      </el-col>
                                  </el-row>
                              </div>
                              <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
                                  最近更新 {{item.node.updateTime}}
                              </div>
                              <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">
                                  {{item.node.description}}
                              </div>
                              <div style="font-size: 1.1rem;color: #303133;padding: 10px 0px 0px 0px">
                                  <el-row>
                                      <el-col :span="16" style="padding-top: 5px">
                                          <el-tooltip effect="dark" :content="'star '+item.stargazersCount" placement="bottom">
                                              <i class="el-icon-star-off" style="margin: 0px 5px 0px 0px"></i>
                                          </el-tooltip>
                                          {{item.node.stargazersCount}}
                                          <el-tooltip effect="dark" :content="'watch '+item.watchersCount" placement="bottom">
                                              <i class="el-icon-view" style="margin: 0px 5px 0px 15px"></i>
                                          </el-tooltip>
                                          {{item.node.watchersCount}}
                                          <el-tooltip effect="dark" :content="'fork '+item.forksCount" placement="bottom">
                                              <i class="el-icon-bell" style="margin: 0px 5px 0px 15px"></i>
                                          </el-tooltip>
                                          {{item.node.forksCount}}
                                      </el-col>
                                      <!-- <el-col :span="8" style="text-align: right;">
                                          <el-tag size="small" type="danger" v-if="item.license">{{item.license}}</el-tag>
                                          <el-tag size="small" type="success">{{item.language}}</el-tag>
                                      </el-col> -->
                                  </el-row>
                              </div>
                          </el-card>
                          <div style="text-align: center">
                              <!-- <el-pagination @current-change="list" background layout="prev, pager, next" :current-page.sync="query.page" :page-size="query.pageSize"
                                  :total="query.pageNumber*query.pageSize">
                              </el-pagination> -->
                              <pager :info="$page.allPro.pageInfo"></pager>
                          </div>
                      </div>
                  </div>
                </el-col>
            </el-row>
        </section>
    </div>
  </Layout>
</template>

<page-query>
  query ($page:Int) {
    allNew {
      edges {
        node {
          id
          url
          title
          created_at
          updated_at
          description
        }
      }
    }
    allFan (perPage: 9, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
          id
          followersTotal
          name
          avatarUrl
          htmlUrl
        }
      }
    }
    allFoll (perPage: 9, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
          followingTotal
          name
          avatarUrl
          htmlUrl
        }
      }
    }
    allBlogs (perPage: 9, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
          count
          title
          updated_at
          description
        }
      }
    }
    allPro (perPage: 9, page: $page) @paginate {
      pageInfo {
        totalPages
        currentPage
      }
      edges {
        node {
          count
          name
          updated_at
          description
          stargazersCount,
          watchersCount,
          forksCount
        }
      }
    }
  }
</page-query>

<script>
import { Pager } from 'gridsome'
export default {
  name: 'HomePage',
  components: {
    Pager
  },
  metaInfo: {
    title: 'Hello, world!'
  },
  computed: {
    blog () {
      return this.$page.allNew.edges[0].node
    }
  },
  data () {
    return {
      constantRouterMap: [
        {
          path: '/user/new',
          redirect: '/user/new/main',
          // component: Layout,
          meta: {
              type: "user",
              icon: 'el-icon-star-off',
              title: '最新动态'
          }
      },
        {
            path: '/user/social',
            redirect: '/user/social/main',
            // component: Layout,
            meta: {
                type: "user",
                icon: 'el-icon-mobile-phone',
                title: '社交圈'
            }
        },
        {
            path: '/user/blog',
            redirect: '/user/blog/main',
            // component: Layout,
            meta: {
                type: "user",
                icon: 'el-icon-edit-outline',
                title: '博客列表'
            }
        },
        {
            path: '/user/project',
            redirect: '/user/project/main',
            // component: Layout,
            meta: {
                type: "user",
                icon: 'el-icon-service',
                title: '开源项目'
            }
        },
        {
            path: '/user/helper',
            redirect: '/user/helper/main',
            // component: Layout,
            meta: {
                type: "user",
                icon: 'el-icon-printer',
                title: '使用帮助',
                mini: true
            }
        },
        {
            path: '/user/readme',
            redirect: '/user/readme/main',
            // component: Layout,
            meta: {
                type: "user",
                icon: 'el-icon-document',
                title: 'README.md'
            }
        },
        {
          path: '/user/configure',
          redirect: '/user/configure/main',
          // component: Layout,
          meta: {
              type: "user",
              icon: 'el-icon-setting',
              title: '系统配置',
              LoginRequired: true
          }
      }
      ],
      selected: 0,
      activeTab: 'followers'
    }
  },
  methods: {
    select (i) {
      this.selected = i
    },
  }
}
</script>

<style>
</style>
